<template>
  <div id="detail">
    <NavBack title="详情"></NavBack>

    <van-cell-group>

      <van-cell class="list-item" :key="info.id">
        <template #title>
          <div style="display: flex">
            <van-image src="http://localhost:8080/static/img/normal.0447fe9.png"
                       @click="bookDetail(info.id)"></van-image>

            <div>
              <h3>{{ info.b_title }}</h3>
              <p>
                <van-tag type="default">作者：{{ info.b_author }}</van-tag>
              </p>
              <p>
                <van-tag type="default">出版社：{{ info.b_publisher }}</van-tag>
              </p>
              <p>
                <van-tag type="default">出版时间：{{ info.b_publisher_time }}</van-tag>
              </p>
            </div>
          </div>
        </template>
        <!--<template>
          <van-button plain hairline type="info" :loading="false" @click="" size="small">借阅</van-button>
          <van-button plain hairline type="info" :loading="false" @click="" size="small">查看</van-button>
        </template>-->
      </van-cell>
    </van-cell-group>

    <van-cell-group class="book-div">
      <van-cell class="book-div-title">
        <template #title>
          <div class="book-div-title_title">
            <van-icon name="column" size="20"/>
            书籍介绍
          </div>
        </template>
      </van-cell>
      <van-cell class="book-div-desc">
        <template>{{ info.b_desc }}</template>
      </van-cell>
    </van-cell-group>

    <!--<van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">预约借阅</van-tabbar-item>
      <van-tabbar-item icon="search">预约归还</van-tabbar-item>
    </van-tabbar>-->
  </div>
</template>

<script>
import NavBack from "../common/NavBack";
import {book, status} from "../../request/api";

export default {
  name: "Detail",
  data() {
    return {active: -1, info: {}};
  },
  components: {NavBack},
  created() {
    if (!this.$route.params.id) {
      this.$toast('参数错误');
      this.$router.back();
    }

    this.getInfo(this.$route.params.id);
  },
  methods: {
    async getInfo(id) {
      const res = await book.read({id});
      if (res.data.code == status.STATUS_SUCCESS) this.info = res.data.data;
    },
  }
}
</script>

<style scoped>
#detail {
  background: #f5f5f5;
}

#detail p, #detail h3 {
  padding: 0;
  margin: 0;
}

#detail .van-cell-group {
  margin-bottom: 0.5rem;
}

#detail .list-item .van-image {
  width: 4.5rem;
  height: 6rem;
  margin-right: 0.5rem;
  border: 1px solid #ddd;
}

#detail .book-div:after, .book-div-desc:after {
  border: none;
}

#detail .book-div-title .book-div-title_title {
  align-items: center;
  display: flex;
  font-size: 16px;
  font-weight: bolder;
}
</style>
